<template>
  <div class="app">
    <h1>学生课程管理系统</h1>
    <CourseForm :editingCourse="editingCourse" @submit="handleSubmit" @cancel="cancelEdit" />
    <CourseList @edit="startEdit" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CourseForm from './components/CourseForm.vue';
import CourseList from './components/CourseList.vue';
import { useCourseStore } from './stores/courseStore';

const courseStore = useCourseStore();
const editingCourse = ref(null);

// 开始编辑课程
const startEdit = (course) => {
  editingCourse.value = course;
};

// 取消编辑
const cancelEdit = () => {
  editingCourse.value = null;
};

// 处理表单提交
const handleSubmit = (courseData) => {
  if (editingCourse.value) {
    // 更新现有课程
    courseStore.updateCourse(editingCourse.value.id, courseData);
    editingCourse.value = null;
  } else {
    // 添加新课程
    courseStore.addCourse(courseData);
  }
};
</script>

<style>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
}
</style>